<template>
  <div class="picturedtl-con">
    <!--<v-header>
            <div class="nav-tab2">
                <h3>资讯</h3>
            </div>
        </v-header>-->
    <div class="detl_cont" v-bind:style="{ height: deviceHeight + 'px' }">
      <swiper :options="swiperOption" class="swiper-container swiper2">
        <swiper-slide>
          <section>
            <div class="picback" :style="{ backgroundImage: 'url('+https( info.coverurl) +')'}"></div>
            <div class="title_box grad_bgcolor">
              <p>{{info.title}}</p>
              <div class="from_date clearfix">
                <a v-if="!insq" :href="info.link" target="_blank" class="from_detl">From:{{info.publishername}}</a>
                <!--<span class="from_detl">{{info.publishername}}</span>-->
                <span class="time_detl">{{info.publishtime}}</span>
                <span v-if="insq" @click="favArticle()">
                  <em :class="{'ico-heart-yell':!info.isfavor,'ico-heart-favoryell':info.isfavor}"></em>
                </span>
              </div>
            </div>
          </section>
        </swiper-slide>
        <swiper-slide v-for="(item,index) in info.pictureLists" :key='index'>
          <section>
            <div class="picback" :style="{ backgroundImage: 'url('+https( item.dataurl) +')'}"></div>
            <div class="title_label grad_bgcolor">
              <p class="pagenum_pic">
                <span>{{index+1}}</span>
                <span>/{{info.pictureLists.length}}</span>
                <label>{{item.data}}</label>
              </p>
            </div>
          </section>
        </swiper-slide>
        <swiper-slide>
        </swiper-slide>
      </swiper>
    </div>
  </div>
</template>
<script>
import { FavorArticle } from '../../../common/api/userFavor'
import { mapGetters } from 'vuex'
export default {
  data() {
    return {
      deviceHeight: 0,
      swiperOption: {
        autoplay: 0,
        height: window.innerHeight,
        onReachEnd: swiper => {
          this.slideEnd(swiper)
        }
      },
      id: ''
    }
  },
  props: {
    info: Object
  },
  computed: {
    ...mapGetters(['insq'])
  },
  mounted() {
    this.id = this.$route.params.id
    let deviceHei = document.documentElement ? document.documentElement.clientHeight : document.body.clientHeight
    this.deviceHeight = deviceHei
  },
  methods: {
    slideEnd(swiper) {
      this.$router.push('/news/picrecomd/' + this.id)
    },
    favArticle() {
      //   console.log(this.info)
      var postData = {
        ArticleId: this.info.id,
        IsCancel: this.info.isfavor
      }
      var errormsg = ''
      FavorArticle(postData)
        .then(res => {
          this.info.isfavor = !this.info.isfavor
          errormsg = (this.info.isfavor ? '' : '取消') + '收藏成功'
          this.toast(errormsg)
        })
        .catch(err => {
          console.log('err', err)
          this.toast(err.msg)
        })
    }
  }
}
</script>
<style scoped>
.picturedtl-con .detl_cont {
  position: relative;
  background: #000;
}

.picturedtl-con .picback {
  width: 100%;
  height: 100%;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
}

.swiper-container,
.swiper-container section {
  height: 100%;
}

.picturedtl-con .title_box {
  position: absolute;
  bottom: 0px;
  width: 100%;
  z-index: 1;
  color: #fff;
  font-size: 1.375rem;
  line-height: 1.75rem;
  padding: 10px;
}

.picturedtl-con .title_box p {
  text-align: left;
  font-size: 22px;
}

.picturedtl-con .title_label {
  position: absolute;
  bottom: 0px;
  width: 100%;
  z-index: 1;
  color: #fff;
  font-size: 0.875rem;
}

.grad_bgcolor {
  background: -webkit-linear-gradient(rgba(0, 0, 0, 0.8) 5%, rgba(255, 255, 255, 0.2));
  background: -o-linear-gradient(rgba(0, 0, 0, 0.8) 5%, rgba(255, 255, 255, 0.2));
  background: -moz-linear-gradient(rgba(0, 0, 0, 0.8) 5%, rgba(255, 255, 255, 0.2));
  background: linear-gradient(rgba(0, 0, 0, 0.8) 5%, rgba(255, 255, 255, 0.2));
}

.picturedtl-con .from_date {
  height: 40px;
  line-height: 40px;
}

.picturedtl-con .from_date a {
  color: #fff;
  float: left;
}

.picturedtl-con .from_date > span {
  float: left;
  font-size: 0.75rem;
}

.picturedtl-con .from_date > span:last-child {
  float: right;
  text-align: right;
}

.picturedtl-con .pagenum_pic {
  padding: 0.75rem 1.125rem;
  text-align: left;
}

.picturedtl-con .pagenum_pic > span {
  color: #ffc700;
  font-size: 0.75rem;
}

.picturedtl-con .pagenum_pic > span:first-child {
  font-size: 1.0625rem;
}

.picturedtl-con .pagenum_pic > label {
  font-size: 0.825rem;
}

.picturedtl-con .recomd_page {
  background: #fff;
  padding: 10px 5px;
}
</style>
